<template>
  <div id="requireList">
    <el-dialog title="请输入提现金额" :visible.sync="dialogFormVisible" style="text-align:left;" size="tiny">
      <el-form>
        <el-form-item label="当前余额" :label-width="formLabelWidth">
          <!--<el-input v-model="balance"  auto-complete="off" readonly style="width:120px;height: 35px;"></el-input>-->
          <div style="margin-left: 10px;font-size: 16px;font-weight: bold" v-text="balance"></div>
        </el-form-item>
        <el-form-item label="请输入提现金额" :label-width="formLabelWidth">
          <el-input v-model="money"  auto-complete="off" style="width:120px;height: 35px;"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="requireCash">确 定</el-button>
      </div>
    </el-dialog>
    <el-row :gutter="10" style="padding-bottom: 12px">
      <el-col :span="2" class="flex" style="justify-content: space-around;align-items: center">
        <el-button type="primary" size="small"  @click='dialogFormVisible = true'>提现申请</el-button>

      </el-col>
      <el-col :span="4" class="flex" style="justify-content: space-around;align-items: center">
        <div class="nowrap" style="padding-right: 6px">状态:</div>


        <el-select v-model="cashInfo.status" size="small" clearable placeholder="全部">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </el-col>
      <el-col :span="6" class="flex" style="justify-content: space-around;align-items: center">
        <div class="nowrap" style="padding-right: 6px">起始时间:</div>

        <div class="block">
          <el-date-picker size="small"  style="width: 100%" v-model="cashInfo.beginTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" class="flex" style="justify-content: space-around;align-items: center">
        <div class="nowrap" style="padding-right: 6px">结束时间:</div>

        <div class="block">
          <el-date-picker style="width: 100%" size="small"   v-model="cashInfo.endTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4" class="flex" style="justify-content: flex-start;align-items: center">

        <el-button type="primary" size="mini" @click="getCashListUser()">查询</el-button>
        <el-button type="primary" size="mini" @click="getCashListUser(9)">导出</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
      <el-table-column type="index">
      </el-table-column>

      <el-table-column prop="money" label="提现金额(元)" width='100'>
      </el-table-column>
      <el-table-column prop="fee" label="手续费（元)">
      </el-table-column>
      <el-table-column prop="cardPhone" label="手机号" width='130'>
      </el-table-column>
      <el-table-column prop="cardBank" label="银行名称"  width='130' >
      </el-table-column>
      <el-table-column prop="cardNo" label="卡号"   width='170'>
      </el-table-column>
      <el-table-column prop="cardPerson" label="持卡人">
      </el-table-column>
      <el-table-column prop="remark" label="备注"  width='130'>
      </el-table-column>
      <el-table-column prop="status" label="处理结果" width='100'>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间"  width='130' >
      </el-table-column>
      <el-table-column prop="finishTime" label="处理时间"  width='130' >
      </el-table-column>
    </el-table>

    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleChange"
        :current-page="cashInfo.pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="cashInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    name: "requireList",
    data () {
      return {
        dialogFormVisible: false,
        formLabelWidth: '120px',
        status: [{
          value: 1,
          label: '待处理'
        },
          {
            value: 7,
            label: '成功'
          },
          {
            value: 8,
            label: '失败'
          }
        ],
        cashInfo: {
          status: '',
          beginTime: '',
          endTime: '',
          pageSize: 5,
          pageNumber: 1
        },
        tableData: [],
        total: 1,
        money: 0,
        loading: false,
        balance: 0
      }
    },
    created() {
      this.$api.getIndexInfo().then(res => {
        if (res.code === '000000') {
          this.balance = res.data.balance
        }
      })
      this.getCashListUser()
    },
    methods: {
      getCashListUser(mes) {
        this.loading = true;
        this.cashInfo.beginTime = Date.parse(this.cashInfo.beginTime);
        this.cashInfo.endTime = Date.parse(this.cashInfo.endTime);
        let params = {};
        Object.assign(params, this.cashInfo);
        for (let item in params) {

          if (params[item] == '') {
            params[item] = undefined
          }
          if (isNaN(params[item])) {
             params[item] = undefined
          }
        }
        if (mes == 9) {
          this.loading = false;
          if(this.cashInfo.endTime && this.cashInfo.beginTime){
            if (this.cashInfo.endTime - this.cashInfo.beginTime > 86400 * 7 *1000){
              this.$message.error('选择时间不能超过7天')
            }else{
              window.open('/ddj/cash/export?' + this.linkUrlParams(this.cashInfo))
            }
          } else {
            this.$message.info('请选择开始时间和结束时间')
          }
        } else {
          this.$api.getCashList(params).then(res => {

            if (res.code == '000000') {
              this.loading = false;
              this.total = res.data.totalRow;
              this.$message({

                type: "success",
                message: "查询成功"
              })
              this.tableData = res.data.list;
              this.tableData.forEach(item => {
                if (item.createTime) {
                  let date = new Date(item.createTime);
                  item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM:ss')
                }
                if (item.finishTime != null && item.finishTime != '') {
                  let date = new Date(item.finishTime);
                  item.finishTime = dateformat(date, 'yyyy-mm-dd HH:MM:ss')
                } else {
                  item.finishTime = ''
                }
                if (item.status && item.status == '1') {
                  item.status = '待处理'
                }
                if (item.status && item.status == '7') {
                  item.status = '成功'
                }
                if (item.status && item.status == '8') {
                  item.status = '失败'
                }
              })
            }

          })
        }

      },
      linkUrlParams(obj) {
        let str = ''
        if (typeof obj === 'object') {
          for (let i in  obj) {
            if (obj[i]) {
              str = str + i + '=' + obj[i] + '&'
            }
          }
          let mid = str.split('')
          mid.pop()
          return mid.join('')
        }
      },
      requireCash() {
        let params = {
          total: this.money,
          type: 1
        }
        this.dialogFormVisible = false;
        this.$api.requireCash(params).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            this.$message({
              type: "success",
              message: "申请成功"
            })
            this.getCashListUser();
          }
        })
      },
      handleChange(val) {
        this.cashInfo.pageNumber = val;

        this.getCashListUser()
      },
      handleSizeChange (val) {
        this.cashInfo.pageSize = val;

        this.getCashListUser()
      }
    }
  }
</script>

<style lang="less">
  #requireList {
    th {
      text-align: center;
    }
  .nowrap{
    padding-right: 6px;
    font-size: 15px;
  }


  }
</style>
